<!--
 * @Author: Lu junwen
 * @Date: 2022-03-18 18:27:04
 * @LastEditors: Lu junwen
 * @LastEditTime: 2022-05-19 02:41:50
 * @FilePath: \vue-shop-app-customer\src\components\goodsCard.vue
-->
<template>
  <div class="app">
    <van-card
      :price="good.goods_price + '.00'"
      :title="good.goods_name"
      :thumb="good.goods_big_logo == '' || good.goods_big_logo == null ? 'http://127.0.0.1:8888/tmp_uploads\\0de02538840f46310d344a883a5ec930.png' : good.goods_big_logo"
      :num="good.goods_number"
      @click="toDetail(good.goods_id)"
    >
      <template #footer>
        <van-stepper
          default-value="0"
          :min="0"
          :max="good.goods_number"
          v-model="nowNumber"
          @plus="numberAdd()"
          @minus="numberSub()"
          @click.stop.native="()=>{}"
        />
      </template>
    </van-card>
    <div class="null" v-if="good.goods_number === 0" @click="toDetail(good.goods_id)">已售光</div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  name: 'goodsCard',
  props: {
    good: {
      type: Object,
      default: {}
    },
    number: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      nowNumber: 0,
    }
  },
  watch: {
    number: {
      handler(newVal) {
        this.nowNumber = newVal
      },
      immediate: true
    }
  },
  computed: {
  },
  mounted() {
    this.getGood()
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        path: "GoodsDetail",
        query: { id }
      })
    },
    numberAdd() {
      //定义一个产品参数
      let orderLine = {
        goods_id: this.good.goods_id,
        goods_price: this.good.goods_price,
        goods_number: this.nowNumber + 1,
        goods_name: this.good.goods_name,
        goods_big_logo: this.good.goods_big_logo,
      };
      //调用添加购物车的方法
      this.$store.dispatch('order/addShopcart', orderLine);
    },
    numberSub() {
      this.$store.dispatch('order/subShopcar', this.good.goods_id)
    },
    getGood() {
      let arr = this.$store.state.order.orderGoods
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        if (this.good.goods_id === element.goods_id) {
          this.nowNumber = element.goods_number
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app {
  margin-bottom: 10px;
  position: relative;
  .null{
    width: 100%;
    height: 132px;
    line-height: 110px;
    text-align: center;
    font-size: 25px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity:0.8;
  }
}
</style>